<template>
    <div v-loading="loading" class="app-container" style="height: 88vh">
        <!-- :hosts ="form.hosts" -->
        <div class="group-list" style="height: 80vh;overflow-y: auto;overflow-x: hidden">
        <applyDetails @assignment ="assignment" :priceFlag="priceFlag" :taskName='taskName' :configure="configure" :form="form" />
        <div class="title" style="margin-top: 30px">流程图</div>
        <Process  ref="process" style="margin-bottom: 10px" />
        <div class="title" style="margin-top: 30px">审批流程</div>
        <div class="xx">
            <ul class="timeline-wrapper">
                <li class="timeline-item" v-for="t in timelineList" :key="t.id">
                    <div class="timeline-box">
                        <div class="out-circle">
                            <div class="in-circle"></div>
                        </div>
                        <div class="long-line"></div>
                    </div>
                    <div class="timeline-content">
                        <div class="box">
                            <div class="timeline-title">{{ t.name }}</div>
                            <div class="timeline-date">{{ t.time }}</div>
                        </div>
                        <div class="timeline-desc" style="margin-bottom: 10px">
                            {{ t.assigneeName }}
                            <span :style="ActionColorStatus(t.action)">{{
                                t.actionName
                            }}</span>
                        </div>
                        <div class="timeline-desc" v-if="t.action">
                            审批意见：{{ t.comment }}
                        </div>
                        <div class="table" v-if="t.incrs">
                            <table v-if="taskName =='监管平台接收' || taskName =='监管平台初核' || taskName =='大数据中心复核' || taskName =='监管平台派发'">
                                <tr>
                                    <!-- v-show="taskName =='监管平台接收' || taskName =='监管平台初核' || taskName =='大数据中心复核' || taskName =='监管平台派发' || taskName =='监管平台确认'" -->
                                    <th>资源分组</th> <th>资源名称</th> <th>用量变化</th> <th>金额变化（天）</th>
                                </tr>
                                <tr v-for="(n,nindex) in t.incrs" :key="nindex">
                                    <td style="color:rgb(153,153,153);text-align: left;">{{n.groupBy}}</td>
                                    <td style="color:rgb(153,153,153);text-align: left;">{{n.resourceName}}</td>
                                    <!-- v-show="taskName =='监管平台接收' || taskName =='监管平台初核' || taskName =='大数据中心复核' || taskName =='监管平台派发' || taskName =='监管平台确认'" -->
                                    <td :style="n.incrAmount >= 0 ?'color:red;text-align: right;' : 'color:rgb(32,178,170);text-align: right;'">
                                        <template>
                                            <img v-show="n.incrAmount" style="width: 12px;" v-if="n.incrAmount > 0" src="../../../assets/icons/top.png" alt="">
                                            <img v-show="n.incrAmount" style="width: 12px;" v-if="n.incrAmount < 0" src="../../../assets/icons/botton.png" alt="">
                                        </template>
                                        <span>
                                            {{n.incrAmount ? Number(n.incrAmount) >= 0 ? n.incrAmount : n.incrAmount : ''}}  {{n.incrAmountUnit}}
                                        </span>
                                    </td>
                                    <td :style=" n.groupBy == '合计' ? Number(n.incrMoney) >= 0 ?'color:red;text-align: right' : 'color:rgb(32,178,170);text-align: right;' : Number(n.incrAmount) >= 0 ?'color:red;text-align: right' : 'color:rgb(32,178,170);text-align: right;'">
                                        <template>
                                            <img v-show="n.incrMoney" style="width: 12px;" v-if=" (n.incrAmount || n.incrForward) > 0" src="../../../assets/icons/top.png" alt="">
                                            <img v-show="n.incrMoney" style="width: 12px;" v-if=" (n.incrAmount || n.incrForward) < 0" src="../../../assets/icons/botton.png" alt="">
                                        </template>
                                        {{n.incrMoney &lt; 0 ? '￥' + n.incrMoney : '￥' + n.incrMoney}} 元
                                    </td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        </div>
        <applyButton

            @openClose="openClose"
            :taskId="taskId"
            :taskName="taskName"
            :detail="form"
        />
    </div>
</template>
<script>
import request from "@/utils/request";
import { taskTodoList,ResourcesChange } from "@/api/todoItem/todo.js";
import { listHistory } from "@/api/activiti/example.js";

import {
    instId,
    serviceByClazz,
    classByCode,
    listByCode,
    formResourceUp,
    XCspecEcs
} from "@/api/resources/apply.js";

import { getChangeDetail } from "@/api/resources/change.js";

import applyDetails from "./addCTodo.vue";
import applyButton from "./button.vue";


import Process from "./process.vue";
import { getDicts } from "@/api/system/dict/data";
import { treeselect } from "@/api/system/dept";
export default {
    name: "ChangeDetailsAgency",
    components: {
        Process,
        applyDetails,
        applyButton,
    },
    data() {
        return {
            timelineList: [
            ],
            // 遮罩层
            loading: false,
            btnLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 待办表格数据
            taskList: [],
            // 弹出层标题
            title: "",
            // 显示/隐藏审批历史
            openHistory: false,
            // 审批历史遮罩层
            historyLoading: false,
            // 审批历史列表
            historyList: [],
            // 审批历史列表数量
            historyTotal: 0,

            // 审批历史查询参数
            historyParams: {
                pageNum: 1,
                pageSize: 10,
                // taskId: null,
                // taskName: null,
            },
            // 任务id
            taskId: "",
            // 流程
            definitionName: "",
            // 节点
            taskName: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // taskId: null,
                // taskName: null,
            },


            //数据详情
            form: {},
            //配置
            configure: {
                dept:[],
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
                CpuFrameworkList:[],//CPU架构
                SpecificationsList:[]
            },
            //是否显示预估费用
            priceFlag: false,
            roleName : sessionStorage.getItem('roleName'),
            funNumber : 0
        };
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        },
        routerUrl(){
            return this.$route.path
        }
    },
    watch: {
        visitedViews(value) {
            if(value){
                if(this.$options.name == 'ChangeDetailsAgency'){
                    this.funNumber = 0
                    this.ObLoder()
                    return
                }
                this.$destroy(this.$options.name)
                this.funNumber = 0
            }
        },
        routerUrl(value){
            if(value == '/todoItem/todoS/ChangeDetailsAgency'){
                this.funNumber = 0
                this.ObLoder()
            }
        }
    },
    beforeDestory(){
    },
    created() {
        // this.getDataOfAdd();
        this.ObLoder()
    },
    beforeDestroy(){
    },
    methods: {
        ObLoder(){
            this.loading = true
            var list = JSON.parse(sessionStorage.getItem('ChangeDetailsAgency'));
            this.title = list.taskName;
            this.taskId = list.taskId;
            this.definitionName = list.definitionName;
            this.taskName = list.taskName;
            this.btnLoading = true;
            var ifStatistic = "false";
            if (
                [
                    "政务云管理员","云资源管理中心管理员","云资源管理中心运维","大数据中心","监管平台"
                ].indexOf(this.roleName) > -1
            ) {
                ifStatistic = "true";
                this.priceFlag = true;
            } else {
                this.priceFlag = false;
            }
            ResourcesChange({ ifStatistic, id: list.instanceId })
                .then((res) => {
                    this.funNumber ++
                    this.getDataOfAdd(res.data.cloudSupplier,res.data,ifStatistic,list)
                })
                .finally(() => {
                    this.btnLoading = false
                    this.loading = false
                });
        },
        // 最后赋值
        assignment(data){
            this.form = JSON.parse(JSON.stringify(data))
        },
        //添加存储产品列表
        addStoreProducts(data) {
            this.configure[
                data.productCode == "共享型" ? "ccList" : "fwcpList"
            ].some((it) => {
                if (it.code == data.diskServerCode) {
                    data.diskServerCode_label = it.serviceName;
                    return true;
                }
            });
            if (this.addShow == 2) {
                this.form.storeProducts[
                    this.index -
                        this.form.hosts.length -
                        this.form.databases.length
                ] = data;
            } else {
                this.form.storeProducts.push(data);
            }
            this.addShow = false;
        },
        addTable(data) {
            data = JSON.parse(JSON.stringify(data));
            if (data.flavorType) {
                this.addHosts(data);
            } else if (data.serverCode) {
                this.addDatabases(data);
            } else {
                this.addStoreProducts(data);
            }
        },
        //添加修改数据库列表
        addDatabases(data) {
            //数据库类型
            this.configure.sjkList.some((it) => {
                if (it.code == data.serverCode) {
                    data.serverCode_label = it.serviceName;
                    return true;
                }
            });
            if (this.addShow == 2) {
                this.form.databases[this.index - this.form.hosts.length] = data;
            } else {
                this.form.databases.push(data);
            }
            this.addShow = false;
        },
        //添加修改服务器列表
        addHosts(data) {
            //可用域
            this.configure.available_domain.some((item) => {
                if (item.dictValue == data.availableDomain) {
                    data.availableDomain_label = item.dictLabel;
                    return true;
                }
            });
            this.configure.codeList.some((item) => {
                if (data.cloudFlavorCode == item.specCode) {
                    item.details.forEach((it) => {
                        if (it.serviceCode == "vcpu") {
                            data.cpuNumber = it.serviceCount;
                            data.serviceCode = it.serviceCode;
                        }
                        if (it.serviceCode == "memory") {
                            data.memorySize = it.serviceCount;
                            data.memoryServerCode = it.serviceCode;
                        }
                    });
                    return;
                }
            });
            //数据盘类型
            data.disks.forEach((item) => {
                this.configure.ccList.some((it) => {
                    if (it.code == item.diskServerCode) {
                        item.diskServerCode_label = it.serviceName;
                        return true;
                    }
                });
            });
            if (data.flavorType == 1) {
                //系统盘类型
                this.configure.storage_type.some((item) => {
                    if (item.code == data.osDisk.diskServerCode) {
                        data.osDisk.diskServerCode_label = item.serviceName;
                        return true;
                    }
                });
                //规格
                this.configure.codeList.some((item) => {
                    if (item.specCode == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.specName;
                        data.cloudFlavorCode_desc = item.desc;
                        return true;
                    }
                });
            }
            if (data.flavorType == 2) {
                this.configure.wlfwqList.some((item) => {
                    if (item.code == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.serviceName;
                        data.cloudFlavorCode_desc = item.remark;
                        return true;
                    }
                });
            }
            if (this.addShow == 2) {
                if (
                    data.hostName &&
                    data.hostName == data.instanceName + "_" + data.num
                ) {
                    this.form.hosts[this.index] = data;
                } else {
                    this.form.hosts.splice(this.index, 1);
                    let sum = 0;
                    this.form.hosts.forEach((item) => {
                        if (
                            item.instanceName == data.instanceName &&
                            item.num > sum
                        ) {
                            sum = item.num;
                        }
                    });
                    data.num = sum + 1;
                    data.hostName = data.instanceName + "_" + data.num;
                    this.form.hosts.push(data);
                }
            } else {
                let num = Number(data.instanceNum);
                data.instanceNum = 1;
                let sum = 0;
                this.form.hosts.forEach((item) => {
                    if (
                        item.instanceName == data.instanceName &&
                        item.num > sum
                    ) {
                        sum = item.num;
                    }
                });
                for (let i = 0; i < num; i++) {
                    let temp = JSON.parse(JSON.stringify(data));
                    if (!temp.num) {
                        temp.num = sum + i + 1;
                    }
                    temp.hostName = temp.instanceName + "_" + temp.num;
                    this.form.hosts.push(temp);
                    this.hosts.push(temp);
                }
            }

            this.addShow = false;
        },
        // 返回审核意见颜色状态
        ActionColorStatus(name) {
            if (name == "COMPLETE") {
                return `margin-left: 10px;color : #008000`;
            } else if (name == "BACK") {
                return `margin-left: 10px;color : #FFA500`;
            } else if (name == "REJECT") {
                return `margin-left: 10px;color : #FFA500`;
            } else if (name == "DELEGATE") {
                return `margin-left: 10px;color : #FFA500`;
            } else if (name == "JUMP") {
                return `margin-left: 10px;color : #FFA500`;
            } else if (name == "DELETE") {
                return `margin-left: 10px;color : #ff0000`;
            } else {
                return `margin-left: 10px;`;
            }
        },
        //获取配置信息
        getDicts() {
            for (let item in this.configure) {
                getDicts(item).then((response) => {
                    this.configure[item] = response.data;
                });
            }
        },

        //关闭弹窗
        openClose(flag) {
            this.open = false;
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$destroy(this.$options.name)
            this.$router.push('/todoItem/todo')
        },
        // 审批历史查询
        formResourceUps(id) {
            formResourceUp(id).then((res) => {
                this.timelineList = res.rows;
            });
        },

        //获取一些配置数据
        getDataOfAdd(data,formdata,ifStatistic,list) {
            if(this.funNumber >1){

            }else{
            this.configure = {
                dept:[],
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
                CpuFrameworkList:[],//CPU架构
                SpecificationsList:[]
            }
            var detail = formdata
            // 获取信创CPU或者内存规格
                XCspecEcs({Inspur:data}).then(res=>{
                    this.configure.SpecificationsList = res.rows
                })
                //部门列表
                treeselect({}).then((response) => {
                    this.configure.dept = response.data;
                });
                //可用域
                getDicts("available_domain").then((response) => {
                    this.configure.available_domain = response.data;
                });
                //服务商
                getDicts("cloud_service_provider").then((response) => {
                    this.configure.cloud_service_provider = response.data;
                });
                //盘类型
                serviceByClazz({ code: "xccc",supplier:data}).then((response) => {
                    response.data.forEach((item) => {
                        if (
                            ["FCcc(tykcc)", "FCcc(SSD)", "spycc"].indexOf(
                                item.code
                            ) < 0
                        ) {
                            this.configure.storage_type.push(item);
                        }
                        if (["spycc"].indexOf(item.code) < 0) {
                            this.configure.ccList.push(item);
                        }
                        if (
                            ["fbscc_wjcc2", "FCcc(tykcc)", "FCcc(SSD)"].indexOf(
                                item.code
                            ) < 0
                        ) {
                            this.configure.fwcpList.push(item);
                        }
                    });
                });
                //
                // CPU架构
                serviceByClazz({code:'xcyzj',supplier:data}).then(res=>{
                    res.data.forEach(item=>{
                        if(item.serviceName != '内存'){
                            this.configure.CpuFrameworkList.push(item)
                        }
                    })
                })
                //操作系统
                classByCode({ code: "xc_os" }).then((response) => {
                    this.configure.czxtList = response.data;
                });
                // //云服务器规格列表
                // listByCode("spec_ecs").then((response) => {
                //     this.configure.codeList = response.data;
                // });
                //高性能服务器资源类型列表
                serviceByClazz({ code: "xcwlfwq",supplier:data }).then((response) => {
                    this.configure.wlfwqList = response.data;
                });
                //数据库类型列表
                serviceByClazz({ code: "xc_database",supplier:data }).then((response) => {
                    this.configure.sjkList = response.data;
                });
                //安全产品列表
                serviceByClazz({ code: "yyaq",supplier:data }).then((response) => {
                    this.configure.yyaqList = response.data;
                });
                setTimeout(() => {
                    this.configure.cloud_service_provider.some((item) => {
                        if (item.dictValue == detail.cloudSupplier) {
                            detail.cloudSupplier_label = item.dictLabel;
                            return true;
                        }
                    });
                    detail.storeProducts.forEach((data) => {
                        this.configure[
                            data.productCode == "共享型" ? "ccList" : "fwcpList"
                        ].some((it) => {
                            if (it.code == data.diskServerCode) {
                                data.diskServerCode_label = it.serviceName;
                                return true;
                            }
                        });
                        data.hostInstanceNames = [];
                        if (data.hosts) {
                            data.hosts.forEach((item) => {
                                data.hostInstanceNames.push(item.instanceName);
                            });
                        }
                    });
                    detail.databases.forEach((data) => {
                        this.configure.sjkList.some((it) => {
                            if (it.code == data.serverCode) {
                                data.serverCode_label = it.serviceName;
                                return true;
                            }
                        });
                    });
                    detail.hosts.forEach((data) => {
                        data.hostName = data.instanceName;
                        //可用域
                        this.configure.available_domain.some((item) => {
                            if (item.dictValue == data.availableDomain) {
                                data.availableDomain_label = item.dictLabel;
                                return true;
                            }
                        });
                        //数据盘类型
                        if (data.disks && data.disks.length) {
                            data.disks.forEach((item) => {
                                this.configure.ccList.some((it) => {
                                    if (it.code == item.diskServerCode) {
                                        item.diskServerCode_label = it.serviceName;
                                        return true;
                                    }
                                });
                            });
                        } else {
                            data.disks = [];
                        }
                        if (data.flavorType == 1) {
                            //系统盘类型
                            if (data.osDisk) {
                                this.configure.storage_type.some((item) => {
                                    if (item.code == data.osDisk.diskServerCode) {
                                        data.osDisk.diskServerCode_label =
                                            item.serviceName;
                                        return true;
                                    }
                                });
                            }
                            this.configure.codeList.some((item) => {
                                if (item.specCode == data.cloudFlavorCode) {
                                    data.cloudFlavorCode_label = item.specName;
                                    data.cloudFlavorCode_desc = item.desc;
                                    return true;
                                }
                            });
                        }
                        if (data.flavorType == 2) {
                            this.configure.wlfwqList.some((item) => {
                                if (item.code == data.cloudFlavorCode) {
                                    data.cloudFlavorCode_label = item.serviceName;
                                    data.cloudFlavorCode_desc = item.remark;
                                    return true;
                                }
                            });
                        }
                    });
                    setTimeout(() => {
                        this.form = detail;
                        this.form.ifStatistic =
                            ifStatistic == "true" ? true : false;
                        this.open = true;
                        this.formResourceUps(list.instanceId);
                        this.$refs.process.init(list);
                        this.loading = false
                    }, 200);
                }, 100);
            }
        },

        /** 查询审批历史 */
        showHistory(data) {
            this.historyList = [];
            this.title = data.taskName;
            this.openHistory = true;
            this.historyParams = {
                pageNum: 1,
                pageSize: 10,
                processInstanceId: data.instanceId,
            };
            this.getHistory();
        },
        getHistory() {
            this.btnLoading = true;
            this.historyLoading = true;
            listHistory(this.historyParams)
                .then((response) => {
                    this.historyList = response.rows;
                    this.historyTotal = response.total;
                    this.historyLoading = false;
                })
                .finally(() => {
                    this.btnLoading = false;
                });
        },

        /** 查询待办列表 */
        getList() {
            taskTodoList(this.queryParams).then((response) => {
                this.taskList = response.rows;
                this.total = response.total;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                taskId: null,
                taskName: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加待办";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getDemo(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改待办";
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.app-container{
    .group-list::-webkit-scrollbar {
    width: 4px;
    }
    .group-list::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    }
}
.title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
}
.xx {
    ul.timeline-wrapper {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 时间线 */
    .timeline-item {
        position: relative;

        .timeline-box {
            text-align: center;
            position: absolute;

            .out-circle {
                width: 16px;
                height: 16px;
                background: rgba(14, 116, 218, 0.1);
                box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                /*opacity: 0.1;*/
                border-radius: 50%;
                display: flex;
                align-items: center;

                .in-circle {
                    width: 8px;
                    height: 8px;
                    margin: 0 auto;
                    background: rgba(14, 116, 218, 1);
                    border-radius: 50%;
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                }
            }

            .long-line {
                width: 2px;
                height: 98px;
                height: 100%;
                background: rgba(14, 116, 218, 1);
                box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                opacity: 0.1;
                margin-left: 8px;
            }
        }

        .timeline-content {
            box-sizing: border-box;
            margin-left: 20px;
            height: auto;
            padding: 0 0 0 20px;
            text-align: left;
            margin-bottom: 30px;
            .box {
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                .timeline-title {
                    font-size: 18px;
                    // word-break: break-all;
                    color: #333;
                    font-weight: 500;
                    /*display: inline;*/
                }

                .timeline-date {
                    margin-left: 50px;
                    font-size: 16px;
                    color: #333;
                    font-weight: 500;
                }
            }
            .timeline-desc {
                font-size: 14px;
                margin-bottom: 10px;
                color: #999999;
            }
            .table{
                table{
                    // width: 500px;
                    border: 1px solid #fff;
                    padding: 5px;
                    border-collapse: collapse; //使边框合并为一个单一的边框
                    font-size: 14px;
                }
                th{
                    border: 1px solid rgb(250,249,255);
                    background-color: rgb(250,249,255);
                    color: rgb(0, 0, 0);
                    padding: 5px 10px;
                }
                td{
                    border: 1px solid rgb(250,249,255);
                    padding: 5px 10px;
                    font-size: 12px;
                    text-align: center;
                }
            }
        }
    }

    .timeline-item:last-of-type .timeline-content {
        margin-bottom: 0;
    }
}
</style>
